<template>
  <!--新增角色信息-->
  <div>
    <el-row>
      <el-col :span="22" :offset="1" >

        <el-card class="box-card" shadow="always" style="padding: 0 15px;">

          <el-row>
            <el-col :span="24" :offset="0" style="margin-top:10px;border: 1px solid white">

              <el-form :label-position="labelPosition" :inline="true" :model="form">
                <div style="margin-bottom:-80px;border: 1px solid white">
                  <el-form-item style="width: 100%; line-height:40px;border: 1px solid white">
                    <el-divider direction="vertical" style="size:20px"></el-divider>
                    <span style="color:blue;font-size: 25px;float: left"><strong>新增角色信息</strong></span>
                    <el-button type="primary" style="float: right;" @click="back">返回
                    </el-button>
                    <el-button type="primary" @click="onSubmit" style="float: right;margin-right: 10px">保存</el-button>
                  </el-form-item>
                </div>

                <el-form-item align="left" label="角色编号" class="width270Height40">
                  <el-input v-model="form.id"></el-input>
                </el-form-item>
                <el-form-item align="left" label="角色名称" class="width270Height40">
                  <el-input v-model="form.name"></el-input>
                </el-form-item><br/>
                <el-form-item align="left" label="角色描述" class="width270Height40" style="width: 100%;">
                  <el-input v-model="form.price" style="width: 900px;"></el-input>
                </el-form-item>



                <!--权限分配-->
                <div style="color:blue;font-size: 25px;float:left;line-height:40px;"><strong>权限分配</strong></div>

                <el-row>
                  <el-col :span="24" :offset="0" style="margin-top:20px;border: 1px solid white">

                    <el-checkbox-group v-model="checkList0" style="text-align:left;height: 80px;line-height:80px;border-bottom: 1px solid #C6C6C6;width: 100%;background: #C2C5F6;">
                      <el-checkbox label="模块" style="margin-right: 70px;font-size: 20px;margin-left: 30px;"></el-checkbox>
                      <span style="font-size: 20px;"><strong>功能</strong></span>
                    </el-checkbox-group>

                    <el-checkbox-group v-model="checkList1" style="float:left;height: 50px;line-height:50px;border-bottom: 1px solid #C6C6C6">
                      <el-checkbox label="模块1" style="margin-right: 70px;margin-left: 30px;"></el-checkbox>
                      <el-checkbox label="功能1" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能2" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能3" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能4" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能5" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能6" style="margin-right: 50px;"></el-checkbox>
                    </el-checkbox-group>

                    <el-checkbox-group v-model="checkList2" style="float:left;height: 50px;line-height:50px;border-bottom: 1px solid #C6C6C6">
                      <el-checkbox label="模块2" style="margin-right: 70px;margin-left: 30px;"></el-checkbox>
                      <el-checkbox label="功能1" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能2" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能3" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能4" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能5" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能6" style="margin-right: 50px;"></el-checkbox>
                    </el-checkbox-group>

                    <el-checkbox-group v-model="checkList3" style="float:left;height: 50px;line-height:50px;border-bottom: 1px solid #C6C6C6">
                      <el-checkbox label="模块3" style="margin-right: 70px;margin-left: 30px;"></el-checkbox>
                      <el-checkbox label="功能1" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能2" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能3" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能4" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能5" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能6" style="margin-right: 50px;"></el-checkbox>
                    </el-checkbox-group>

                    <el-checkbox-group v-model="checkList4" style="float:left;height: 50px;line-height:50px;border-bottom: 1px solid #C6C6C6">
                      <el-checkbox label="模块4" style="margin-right: 70px;margin-left: 30px;"></el-checkbox>
                      <el-checkbox label="功能1" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能2" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能3" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能4" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能5" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能6" style="margin-right: 50px;"></el-checkbox>
                    </el-checkbox-group>

                    <el-checkbox-group v-model="checkList5" style="float:left;height: 50px;line-height:50px;border-bottom: 1px solid #C6C6C6">
                      <el-checkbox label="模块5" style="margin-right: 70px;margin-left: 30px;"></el-checkbox>
                      <el-checkbox label="功能1" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能2" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能3" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能4" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能5" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能6" style="margin-right: 50px;"></el-checkbox>
                    </el-checkbox-group>

                    <el-checkbox-group v-model="checkList6" style="float:left;height: 50px;line-height:50px;border-bottom: 1px solid #C6C6C6">
                      <el-checkbox label="模块6" style="margin-right: 70px;margin-left: 30px;"></el-checkbox>
                      <el-checkbox label="功能1" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能2" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能3" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能4" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能5" style="margin-right: 50px;"></el-checkbox>
                      <el-checkbox label="功能6" style="margin-right: 50px;"></el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                </el-row>

              </el-form>

            </el-col>
          </el-row>



        </el-card>

      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        labelPosition: 'top',
        form: {
          id: '',
          name: '',
          price: '',
          price1: '',
          danwei: '',
          fenlei: '',
          leixing: '',
          date1: '',
          x: ""
        },
        checkList0: ['模块'],
        checkList1: ['模块1','功能1'],
        checkList2: ['模块2','功能2'],
        checkList3: ['模块3','功能3'],
        checkList4: ['模块4','功能4'],
        checkList5: ['模块5','功能5'],
        checkList6: ['模块6','功能6'],
      };
    },
    methods: {
      onSubmit() {
        alert("保存成功")
        console.log('submit!');
      },
      back:function () {
        this.$router.push("/employee")
      }
    }
  }
</script>

<style scoped>
  .width270Height40{
    width: 270px;line-height:40px;float:left;margin-right:40px;
  }
</style>
